<template>
	<div class="header">
		<div class="header-left">
			<span class="iconfont">&#xe624;</span>
		</div>
		<div class="header-search">
			<span class="iconfont">&#xe632;</span>
			输入城市/景点/游玩主题
		</div>
		<router-link to="/city">
			<div class="header-right">
				{{city}}
				<span class="iconfont">&#xe6aa;</span>
			</div>
		</router-link>
	</div>
</template>

<script>
	import { mapState } from 'Vuex'
	export default {
		computed : {
			...mapState(['city'])
		}
	}
</script>

<style scoped="scoped" lang="stylus">
	
	@import '~css/var.styl'
	
	.header{
			display: flex;
		    width: 100%;
		    height: .88rem;
		    background: $bgColor;
		    color: #fff;
		    font-size: .36rem;
	}
	.header-left{
		width: .4rem;
		line-height: .88rem;
		padding: 0 .2rem;
		color: #fff;
		text-align: center;
	}
	.header-search{
		flex: 1;
		height: .6rem;
		margin: .14rem 0;
		background: #fff;
		line-height: .6rem;
		border-radius: .06rem;
		color: #e4e7ea;
		font-size: .28rem;
		padding-left: .3rem;
	}
	.header-right{
		min-width: 1.2rem;
		margin-left: .2rem;
		line-height: .88rem;
		margin-right: .1rem;
		color: #fff;
		text-align: center;
		font-size: .28rem;
	}
	
	
	
</style>